import React from 'react'

import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Link , useNavigate } from 'react-router-dom'
import './less/Login.less'
import logoImg from '../assets/logo.png'
// 注册API引入
import { RegisterApi } from '../request/api';

export default function Register() {
    const navigate = useNavigate()

    const onFinish = (values) => {
        console.log('Success:', values);
        RegisterApi({
            username: values.username,
            password: values.password,
        }).then(res=>{//会有跨域问题
            console.log(res);
            if(res.errCode === 0){
                message.success(res.message);
                // 跳转登录页
                setTimeout(()=> {
                    navigate('/login');
                },1000)
                

            }else{
                message.error(res.message);
            }
        })  
        };
    
        const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
        };
    return (
        <div className='login'>
            <div className='login_box'>
                <img src={logoImg} alt=""/>
                <Form
                    name="basic"
                    
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
    >               
                    <Form.Item
                        
                        label="昵 称"
                        name="username"
                        
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input 
                        prefix={<UserOutlined  />} 
                        placeholder="请输入用户名"
                        size='large'/>
                    </Form.Item>

                    <Form.Item
                        
                        label="密 码"
                        name="password"
                        
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input.Password size='large'
                        prefix={<LockOutlined />}
                        placeholder="请输入密码"/>
                    </Form.Item>

                    <Form.Item
                        name="confirm"
                        label="确认密码"
                        dependencies={['password']}
                        hasFeedback
                        rules={[
                        {
                            required: true,
                            message: '请再次输入密码',
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                            if (!value || getFieldValue('password') === value) {
                                return Promise.resolve();
                            }

                            return Promise.reject(new Error('请输入相同密码'));
                            },
                        }),
                        ]}
                    >
                        <Input.Password size='large'
                        prefix={<LockOutlined />}
                        placeholder="请再次输入密码"
                        />
                    </Form.Item>



                    <Form.Item>
                        <Link to="/login">已有账号？立即登录</Link>
                    </Form.Item>

                    <Form.Item >
                        <Button size = "large" type="primary" htmlType="submit" block>
                        立即注册
                        </Button>
                    </Form.Item>
                </Form>
            </div>           
            
        </div>
    )
}

